<template>
    <div class="view-wrapper">
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item label="角色：" prop="">
            <el-select v-model="queryParams.roleType" placeholder="请选择"  filterable>
              <el-option v-for="item in roleTypeLs" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名：" prop="">
            <el-select v-model="queryParams.id" placeholder="请选择" filterable>
              <el-option v-for="item in idList" :key="item.id" :label="item.value" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="listBox">
        <div class="listBox_head">
          <el-button type="primary" style="margin: 10px 0 20px" @click="addHandle">编辑排班</el-button>
        </div>
        <el-table v-loading="loading" ref="multipleTable" :data="tabList" stripe border tooltip-effect="dark" style="width: 100%">
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="角色" align="center" >
            <template slot-scope="scope">
             <dict-tag :options="roleTypeLs" :value="scope.row.roleType" />
           </template>
          </el-table-column>
          <el-table-column label="姓名" align="center" prop="name"></el-table-column>
          <el-table-column label="手机号" align="center" prop="phone" ></el-table-column>
          <el-table-column label="本月计划直播时长" align="center" prop="planLiveHour" ></el-table-column>
          <el-table-column label="本月实际直播时长" align="center" >
            <template slot-scope="scope">
             <span>{{scope.row.practicalLiveHour}}时{{scope.row.practicalLiveMinute}}分{{scope.row.practicalLiveSecond}}秒</span>
           </template>
          </el-table-column>
          <el-table-column label="当前累计时长" align="center" prop="createTime" >
            <template slot-scope="scope">
             <span>{{scope.row.liveHour}}时{{scope.row.liveMinute}}分{{scope.row.liveSecond}}秒</span>
           </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right"  width="200">
            <template slot-scope="scope">
              <!-- <el-button type="text" size="small" @click="lookHandle(scope.row)">查看详情</el-button> -->
              <el-button type="text" size="small" @click="editHandle(scope.row)">编辑排班</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList"></pagination>
      </div>
    </div>
  </template>
  
  <script>
    import {
      workforceList,
    } from "@/api/customer/scheduleList";
    import {
      commonV1LiveUserSelect
    } from "@/api/customer/livePersonnelList";
    export default {
      name: "",
      data() {
        return {
          // 遮罩层
          loading: false,
          // 总条数
          total: 0,
          //表格数据
          tabList: [],
          pathType: 'add',
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            id:'',//姓名id
            roleType:'',//角色
          },
          idList: [], //客户级别字典
          roleTypeLs: [], //角色状态字典
        };
      },
      computed: {
      },
      created() {
        this.getDict()
        this.getIdList() 
        this.getList()
      },
      methods: {
        //获取状态字典
        getDict() {
          var dictType = "live_user_role_type";
          this.$getSelectList(dictType)
            .then((res) => {
              this.roleTypeLs = res.result[0].dictList;
            })
        },
        //姓名下拉
        getIdList() {
          commonV1LiveUserSelect().then((res) => {
            this.idList = res.result;
          })
        },
        /** 查询列表 */
        getList() {
          this.loading = true;
          workforceList(this.queryParams).then(response => {
            response.result.records.forEach(item => {
              for (var key in item) {
                if (item[key] === '') {
                  item[key] = "-";
                }
              }
            });
            this.tabList = response.result.records;
            this.total = response.result.total;
            this.loading = false;
          }).catch(error => {
              this.loading = false;
            });
        },
        lookHandle(row) {
           // 查看排班详情
          this.$router.push({ path: "/customer/workforceManagement/scheduleList/details", query: { id: row.id }});
        },
        // 表单重置
        reset() {
          this.date = []
          this.queryParams = {
            pageNum: 1,
            pageSize: 10,
            nameID:'',//姓名id
            status:'',//状态
          },
          // this.resetForm("queryParams");
          this.handleQuery()
        },
        //编辑全部排期
        addHandle() {
          this.$router.push({ path: "/customer/workforceManagement/scheduleList/edit"});
        },
        //编辑单个排期
        editHandle(row) {
          this.$router.push({ path: "/customer/workforceManagement/scheduleList/edit", query: { id: row.id }});
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          // this.resetForm("queryForm");
          this.reset();
        },
        _handleSuccess(e) {
          //成功回调
          this.resetQuery()
          this.getList()
        },
        
      }
    };
  
  </script>
  <style scoped>
    .head {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px 0;
    }
  
    .listBox {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px;
      margin-top: 10px;
    }
  
    .listBox_head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  
    .img_box {
      width: 100px;
      height: 80px;
      border-radius: 4px;
    }
  </style>
    